<template>
  <div class="evaluationList-box">
    <nav-title v-if="type=='evaluation'" title="测评评估" routerLink=""/>
    <nav-title v-else-if="type=='performanceAssess'" title="绩效评估" routerLink=""/>
    <nav-title v-else-if="type=='performancePlan'" title="绩效计划审批" routerLink=""/>
    <nav-title v-else-if="type=='performanceInterview'" title="绩效面谈审批" routerLink=""/>

    <div class="search">
      <input class="search-input" type="text" placeholder="请输入搜索关键字" v-model="querykey">
      <img class="search-img" src="./images/search.png" alt="" @click="getList">
    </div>
    <h2>{{allInfo.title}}</h2>
    <ul>
      <li v-for="(item, index) in allInfo.pers">
        <div class="neirong"  @click="goToApprove(item)">
          <div class="information">
            <p><span>{{item.name}}</span> | <span>{{item.emplid}}</span></p>
            <p>{{item.dept}}</p>
            <p>{{item.jobDescr}}</p>
            <p v-if="type=='performancePlan' || (type=='performanceAssess')">{{item.tempName}}</p>
          </div>
          <!-- 测评评估 -->
          <div :class="type=='performanceAssess'? 'operation performancePlan':'operation'" v-if="type=='evaluation' || (type=='performanceAssess')">
            <!-- 根据cwfstatus来判断，C:已评估  U:未评估 -->
            <img v-if="item.assessFlag == 'C' || (item.flag == 'B030')" class="process-img" src="./images/u1345.png" alt="">
            <img v-if="item.flag == 'B020'" class="process-img" src="./images/u1527.png" alt="">
            <img v-if="item.assessFlag == 'U' || (item.flag == 'B010')" class="process-img" src="./images/u1347.png" alt="">
          </div>
          <!-- 绩效计划 -->
          <div class="operation performancePlan" v-else-if="type=='performancePlan'">
            <!-- 根据flag来判断，A010 未审批 A020 待审批 A030 已批准 -->
            <img v-if="item.flag == 'A010'" class="process-img" src="./images/procedure/未审批.png" alt="">
            <img v-if="item.flag == 'A020'" class="process-img" src="./images/procedure/待审批.png" alt="">
            <img v-if="item.flag == 'A030'" class="process-img" src="./images/after-approve.png" alt="">
            <img v-if="item.flag == '0030'" class="process-img" src="./images/procedure/已驳回.png" alt="">
          </div>
          <div class="operation performancePlan" v-else-if="type=='performanceInterview'">
            <!-- 根据flag来判断，N	未面谈  P	待面谈 A	已面谈 -->
            <img v-if="item.flag == 'N'" class="process-img" src="./images/NotInterviewed.png" alt="">
            <img v-if="item.flag == 'P'" class="process-img" src="./images/WaitingInterview.png" alt="">
            <img v-if="item.flag == 'A'" class="process-img" src="./images/Interviewed.png" alt="">
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getEvaluationList, getPerformancePlanList } from "../../api/api";

export default {
  name: "EvaluationList",
  components: {},
  created() {
    this.type = this.$route.query.type;
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.approved = this.$route.query.approved;
  },
  mounted() {
    this.getList();
  },
  data() {
    return {
      type: "evaluation",
      querykey: "",
      cTransactionNbr: "",
      allInfo: {}
    };
  },
  methods: {
    getList() {
      if (this.$route.query.type == "evaluation") {
        this.getEvaluationListFunc();
      } else if (this.$route.query.type == "performancePlan") {
        this.getPerformancePlanListFunc();
      } else if (this.$route.query.type == "performanceAssess") {
        this.getPerformancePlanListFunc();
      } else if (this.$route.query.type == "performanceInterview") {
        this.getPerformancePlanListFunc();
      }
    },
    getEvaluationListFunc() {
      this.$vux.loading.show();
      let params = {
        queryKey: this.querykey,
        oprid: this.$store.state.oprId,
        sheetId: this.cTransactionNbr
      };
      getEvaluationList(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    getPerformancePlanListFunc() {
      this.$vux.loading.show();
      let params = {
        queryKey: this.querykey,
        cTransactionNbr: this.cTransactionNbr
      };
      getPerformancePlanList(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    goToApprove(item) {
      if (this.$route.query.type == "evaluation") {
        this.$router.push({
          //测评评估
          name: "EvaluationAssess",
          query: {
            oprid: item.oprid,
            docid: item.docid,
            sheetid: item.sheetid,
            assessFlag: item.assessFlag
          }
        });
      } else if (this.$route.query.type == "performancePlan") {
        this.$router.push({
          //绩效计划
          name: "PerformancePlanApproval",
          query: {
            docid: item.docid,
            version: item.version,
            epPhase: item.epPhase,
            seqnbr: item.seqnbr,
            cTransactionNbr: this.cTransactionNbr,
            flag: item.flag,
          }
        });
      } else if (this.$route.query.type == "performanceAssess") {
        this.$router.push({
          //绩效评估
          name: "PerformanceAssess",
          query: {
            docid: item.docid,
            version: item.version,
            epPhase: item.epPhase,
            seqnbr: item.seqnbr,
            cTransactionNbr: this.cTransactionNbr,
            flag: item.flag,
          }
        });
      } else if (this.$route.query.type == "performanceInterview") {
        this.$router.push({
          //绩效面谈
          name: "PerformanceInterview",
          query: {
            cTransactionNbr: this.cTransactionNbr,
            emplid: item.emplid,
            docid: item.docid,
            version: item.version,
            epPhase: item.epPhase,
            from: 'approveList',
            approved: this.approved
          }
        });
      }
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.evaluationList-box {
  > h2 {
    text-align: left;
    padding: 10px;
    font-size: 16px;
    background-color: rgb(242, 242, 242);
  }
  .search {
    position: relative;
    .search-input {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      width: 90%;
      margin: 8px 0;
      padding-left: 5px;
      text-align: left;
      border-radius: 3px;
      border: 2px solid #f5f5f5 !important;
    }
    .search-img {
      position: absolute;
      top: 11px;
      right: 5%;
      margin-right: 10px;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    text-align: left;
    li {
      height: 100%;
      clear: both;
      padding: 10px;
      border-bottom: 1px solid #eee;
      .neirong {
        display: flex;
        .information {
          flex: 1;
          p {
            &:first-child {
              font-weight: bold;
            }
          }
        }
        .operation {
          &.performancePlan {
            padding-top: 5px;
            .process-img {
              width: 70px;
              height: 64px;
            }
          }
          .process-img {
            width: 60px;
            height: 54px;
          }
        }
      }
    }
  }
}
</style>
